1 00:00:00,540 --> 00:00:06,780 Hello there and welcome to this feed you on Javascript events. 2 00:00:06,880 --> 00:00:16,530 Events are peace of course in Britain to listen out for things that are happening within the browser 3 00:00:17,010 --> 00:00:19,420 and then response to that. 4 00:00:19,470 --> 00:00:26,960 For example you can click a button on a website or respond to a question. 5 00:00:27,180 --> 00:00:29,810 When you do that that is an event. 6 00:00:29,940 --> 00:00:35,360 There is a code written underneath that responds when you do something. 7 00:00:35,370 --> 00:00:45,080 For example when you click on a button and a website to do some pain invokes or cause that could cause 8 00:00:45,080 --> 00:00:47,640 a function to perform some pain. 9 00:00:47,640 --> 00:00:56,000 So in this video I'll be creating an event and will show you how that works. 10 00:00:56,550 --> 00:00:57,010 All right. 11 00:00:57,030 --> 00:01:04,720 I have written some code here that we can use to test an event. 12 00:01:05,010 --> 00:01:09,840 All right so start with the hastier Mal's side of things. 13 00:01:09,840 --> 00:01:18,100 So this is the button I have created that I want I want the event to happen. 14 00:01:18,300 --> 00:01:20,610 So this is how you create a button. 15 00:01:20,610 --> 00:01:22,670 You start with a button tag. 16 00:01:22,920 --> 00:01:24,160 There's an opaline tag. 17 00:01:24,170 --> 00:01:29,380 There's a close and tag inside the opening opening button tag. 18 00:01:29,460 --> 00:01:35,600 There is click on click is a function in javascript. 19 00:01:35,910 --> 00:01:38,300 So I've made that click. 20 00:01:38,310 --> 00:01:42,020 That means when you click on something something will happen. 21 00:01:42,020 --> 00:01:51,530 I've made it quarter as I've given it value off quick me of my of my Click me. 22 00:01:51,540 --> 00:01:55,140 So this is the name of the function I have written. 23 00:01:55,280 --> 00:01:57,420 This is the this is my script. 24 00:01:57,420 --> 00:02:01,450 This is the US group side of the page. 25 00:02:01,620 --> 00:02:08,170 So I've written a function and I'm giving the function name called My Click me. 26 00:02:08,460 --> 00:02:10,940 So that's why this function here. 27 00:02:10,950 --> 00:02:16,150 When the button is clicked it will give you a value of my Click me. 28 00:02:16,230 --> 00:02:22,690 My Click me here when you click on that it will execute this piece of could here. 29 00:02:22,950 --> 00:02:30,310 What that does it will get the document documents don't get Hillmen by a day. 30 00:02:30,840 --> 00:02:38,650 What it will do it will get the hastier element by its IDM name. 31 00:02:38,850 --> 00:02:47,460 So if you notice this paragraph here it's got an idea of para saw and it gives you a text or Javascript 32 00:02:47,610 --> 00:02:49,500 can be fun to learn. 33 00:02:49,800 --> 00:02:56,990 So when the page loads this text will be displayed by this paragraph. 34 00:02:57,090 --> 00:03:05,550 What its function is doing when when you click on the button the button will pick will replace this 35 00:03:05,550 --> 00:03:10,270 text here with this. 36 00:03:11,040 --> 00:03:17,300 So that is an event where you click on a button it will replace that text with this text. 37 00:03:17,670 --> 00:03:28,320 So the DOT in a hasty email through referring to this here so was saying get this and change this with 38 00:03:28,590 --> 00:03:33,630 this so let me save this and run this code so you can see 39 00:03:36,410 --> 00:03:42,880 well case this is the this is the code so this is the button here. 40 00:03:44,070 --> 00:03:56,660 So if I click on the button I am responding to an event and the event is driven by the code I have written. 41 00:03:57,000 --> 00:04:02,180 So if I click on this Nick could pay me minimize this page. 42 00:04:02,670 --> 00:04:08,560 Okay so this is the code that will be executed if I click on this button. 43 00:04:08,730 --> 00:04:12,830 Currently the text that it's displayed is this text here. 44 00:04:13,170 --> 00:04:15,460 Jabbers creep can be fun to learn. 45 00:04:15,690 --> 00:04:21,230 So what this function is doing the button unclick means when the button is clicked. 46 00:04:21,420 --> 00:04:29,670 I want you to do this function and this function has a value of its function which is this and the the 47 00:04:29,670 --> 00:04:32,730 value of this function is this here. 48 00:04:33,090 --> 00:04:40,350 So if I click on the button it will get this document by its idea which is power and that paragraph 49 00:04:40,740 --> 00:04:47,090 and replace it with this text using the inner hastier mail. 50 00:04:47,130 --> 00:04:48,660 So let's go ahead and do that. 51 00:04:48,660 --> 00:04:56,290 Click on click me say it is change get to a thank you for taking this course which is this here. 52 00:04:56,560 --> 00:04:59,920 So as replace this text here my base. 53 00:05:00,680 --> 00:05:03,280 This is what an event does. 54 00:05:03,400 --> 00:05:10,880 When you find that you have to click on something on a website you are doing that news in an event. 55 00:05:10,880 --> 00:05:17,520 So that means an event is happening and there is a cord behind the action. 56 00:05:17,750 --> 00:05:19,120 You respond to. 57 00:05:19,310 --> 00:05:19,970 Okay. 58 00:05:20,180 --> 00:05:28,600 So I hope the video can be a script event has giving you some kind of idea of what events are. 59 00:05:28,880 --> 00:05:31,380 Thank you so much for watching. 60 00:05:31,430 --> 00:05:34,580 There are parts of this video you do not understand. 61 00:05:34,580 --> 00:05:36,950 Please feel free to contact me. 62 00:05:37,010 --> 00:05:39,250 I'll be more than happy to explain. 63 00:05:39,310 --> 00:05:40,190 Thank you. 64 00:05:40,190 --> 00:05:41,530 Bye for now.